<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="zh">
<head>
    <meta charset="UTF-8">
    <title>课程管理 - 企业培训平台</title>
    <link rel="stylesheet" th:href="@{/css/style.css}">
    <style>
        /* 您原来的课程管理页面的样式可以保留或根据新布局调整 */
        .course-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); /* 响应式网格布局 */
            gap: 20px; /* 网格间距 */
            padding: 20px 0;
        }

        .course-card {
            border: 1px solid #ddd;
            padding: 15px;
            border-radius: 8px;
            background-color: #fff;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            display: flex; /* 使用 Flexbox 布局卡片内容 */
            flex-direction: column; /* 垂直排列 */
            justify-content: space-between; /* 内容上下对齐 */
            height: 100%; /* 确保卡片高度一致 */
        }
        .course-card h3 {
            margin-top: 0;
            color: #333;
            font-size: 1.2em;
            margin-bottom: 10px;
        }
        .course-card p {
            color: #666;
            font-size: 0.9em;
            margin-bottom: 5px;
        }
        .instructor-info {
            font-style: italic;
            color: #555;
        }
        .card-actions {
            margin-top: 15px;
            display: flex; /* 按钮使用 Flexbox 布局 */
            justify-content: flex-end; /* 按钮靠右对齐 */
        }
        .card-actions button,
        .card-actions a {
            margin-left: 10px; /* 按钮之间间距 */
        }
        .form-actions form { /* Style for the delete form to align buttons */
            display: inline;
        }

        /* New styles for image display */
        .course-card-image {
            width: 100%; /* 图片宽度占满卡片 */
            height: 180px; /* 固定图片高度 */
            object-fit: cover; /* 裁剪图片以填充，保持比例 */
            border-radius: 4px; /* 图片圆角 */
            margin-bottom: 10px;
            background-color: #f0f0f0; /* 占位背景色 */
            display: block; /* 确保图片是块级元素 */
        }
        .course-card-image.placeholder {
            display: flex;
            align-items: center;
            justify-content: center;
            color: #aaa;
            font-size: 0.9em;
            text-align: center;
            border: 1px dashed #ccc;
        }
    </style>
</head>
<body>
<div th:replace="~{fragments/header :: common-header}"></div>

<div class="main-content">
    <div class="container">
        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;">
            <h1 class="page-title" style="margin-bottom: 0;">课程管理</h1>
            <div class="actions-bar" style="margin-bottom: 0;">
                <a th:href="@{/course/create}" class="btn btn-primary">添加新课程</a>
            </div>
        </div>

        <div th:if="${successMessage}" class="alert alert-success">
            <p th:text="${successMessage}"></p>
        </div>
        <div th:if="${errorMessage}" class="alert alert-danger">
            <p th:text="${errorMessage}"></p>
        </div>


        <div class="course-grid">
            <div class="course-card" th:each="course : ${courses}">
                <img th:if="${course.couPic != null and course.couPic != ''}"
                     th:src="${course.couPic}"
                     alt="课程封面"
                     class="course-card-image">
                <div th:unless="${course.couPic != null and course.couPic != ''}"
                     class="course-card-image placeholder">
                    暂无封面图片
                </div>

                <h3 th:text="${course.couName}">课程名称占位符</h3>
                <p th:text="${course.couIntroduction}">课程介绍占位符。</p>
                <p class="instructor-info">讲师：<span th:text="${course.teaId != null ? '讲师ID: ' + course.teaId : '未知讲师'}">讲师姓名占位符</span></p>
                <p>章节数：<span th:text="${course.couCataNum}">章节数占位符</span></p>
                <div class="card-actions">
                    <a th:href="@{/course/detail/{id}(id=${course.id})}" class="btn btn-info btn-sm">查看详情</a>
                    <a th:href="@{/chapter/manage/{courseId}(courseId=${course.id})}" class="btn btn-info btn-sm">管理章节</a>
                    <a th:href="@{/course/edit/{id}(id=${course.id})}" class="btn btn-secondary btn-sm">编辑</a>

                    <form th:action="@{/course/delete/{id}(id=${course.id})}" method="post" style="display: inline;">
                        <button type="submit" class="btn btn-danger btn-sm" onclick="return confirm('确定要删除这门课程吗？');">删除</button>
                    </form>
                </div>
            </div>
            <div th:if="${#lists.isEmpty(courses)}" class="no-results-message">
                <p>暂无课程可供管理。</p>
            </div>
        </div>
    </div>
</div>
</body>
</html>
